<template>
	<view class="yt-txl-container">
		<!-- <view class="search">
			<input type="text" @input="inputFunc" class="s-input" placeholder="搜索" />
		</view> -->
		<u-navbar :is-back="false" title="" :background="background">
			<view class="search">
				<input type="text" @input="inputFunc" class="s-input" placeholder="搜一搜" placeholder-style="fontSize: 28rpx;" />
				<view class="cancel" @click="cancel">取消</view>
			</view>
		</u-navbar>
		<view :class="['scroll', {ios: ios}, {android: ios}]" :style="index ? '' :'right:25upx'">
			<scroll-view :scroll-into-view="to" scroll-y style="width: 100%;height: 100%;">
				<view :id="o.key" v-for="(o,i) in resource" :key="i">
					<view class="p" >{{o.key}}</view>
					<view @click="clickFunc(item)" v-for="(item,index) in o.data" class="info" :key="index">
						<!-- <view :style="'background:'+color" class="icon">
							{{item[name].slice(0,1)}}
						</view> -->
						<view class="icon" style="overflow: hidden;">
							<image :src="item.avatar" mode="" style="width: 100%;height: 100%;"></image>
						</view>
						<view class="item">
							<text class="name">{{item[name]}}</text>
							<text class="post">{{item.departmentName}}</text>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="flag" v-if="index" :style="{top: ios ? '140rpx' : '170rpx'}">
			<scroll-view scroll-y="true" :show-scrollbar="false" class="flag-scroll" style="width: 100%;height: 100%;">
				<view @click="toFunc(o.key)" class="flag-key" v-for="(o,i) in resource" :key="i">
					{{o.key}}
				</view>
			</scroll-view>
		</view>
		<u-modal class="team-content" v-model="showModal" confirm-text="关闭" confirm-color="#6d788a" :show-title="false" :mask-close-able="true">
			<view class="slot-content">
				<view class="header">
					<view class="top">
						<image :src="lawyerDetail.avatar || '../../static/images/avatar.png'" mode=""></image>
						<view>
							<view class="name">
								<text>{{ lawyerDetail.nickname }}</text>
								<text class="over-hidden" style="display: inline-block;width: 224rpx;">{{ lawyerDetail.job_title }}</text>
							</view>
							<view class="company">{{ lawyerDetail.office_name }}</view>
						</view>
					</view>
					<view class="bot">
						<u-tag class="bb" :text="tag.name" mode="plain" size="mini" color="#d9b975" border-color="#d9b975" v-for="(tag, index) in lawyerDetail.tag" :key="index" />
					</view>
					<image class="bg" src="../../static/images/user_header_bg.png" mode=""></image>
				</view>
				<view>
					<scroll-view style="height: 600rpx;" scroll-y="true">
						<view class="info" style="overflow: scroll;display: flex;align-items: flex-start;">
							{{ lawyerDetail.introduction || '暂无详细说明' }}
						</view>
					</scroll-view>
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	'use strict';

	let pinyin = new(require('./pinyin'))({
		charCase: 0
	});
	import { findLawyer } from '@/api/indexApi.js'
	export default {
		props: {
			datas: {
				type: Array,
				default () {
					return [];
				}
			},
			name: {
				type: String,
				default () {
					return "name";
				}
			},
			index: {
				type: Boolean,
				default: true
			},
			color: {
				type:String,
				default:"#f44336"
			}
		},
		data() {
			return {
				resource: [],
				chars: [],
				to: "",
				cache:[],
				background: {
					backgroundColor: '#0d2647',
				},
				ios: false,
				lawyerDetail: {},
				showModal: false
			}
		},
		created() {
			if (uni.getSystemInfoSync().platform == "ios") {
				this.ios = true
			}
			// console.log(this.ios)
		},
		watch: {
			datas(r) {
				// if (!(r instanceof Array)) {
				// 	console.log("the props datas type must be array")
				// 	return
				// }
				this._parseData(r)
			}
		},
		methods: {
			toFunc(o) {
				this.to = o
			},
			async clickFunc(item){
				this.$emit("ev",item)
				uni.showLoading({mask:true,title:'请稍后...'})
				const res = await findLawyer({id: item.id})
				this.lawyerDetail = res.data.data.list
				console.log(res)
				this.showModal = true
			},
			cancel() {
				this.$emit("ec",true)
			},
			inputFunc(r){ //搜索功能
				if(!r.detail.value) {
					this.resource = this.cache
					return
				}
				
				let temp = []
				this.cache.forEach(o => {
					o.data.forEach(item =>{
						if(item[this.name].indexOf(r.detail.value) > -1){ // 匹配到
							// 确定当前这个元素的key是谁
							let key = o.key
							// 找到temp中的key
							let index = 0 //下标
							let find = false // 数据是否存在
							for(let d in temp){
								if(temp[d].key === o.key){
									index = d
									find = true
								}
							}
							if(find){ // 如果key已经存在，直接插入数据
								temp[index].data.push(item)
							} else { // 不存在初始化一个并存入
								temp.push({
									key:o.key,
									data:[item]
								})
							}
						}
					})
				})
				this.resource = temp
			},
			_type(val){
				return Object.prototype.toString.call(val).slice(8,-1).toLowerCase()
			},
			_parseData(r) {
				// 生成a-z的数组
				let data = [];
				this.chars = []
				for (let i = 65; i <= 90; i++) {
					let key = String.fromCharCode(i)
					data.push({"key":key,data:[]})
					this.chars.push(key)
				}
				if(this._type(r) === "array") {
					
					// 填充数据
					r.forEach(o => {
						// 找到char的位置
						data.forEach( (item,index) => {
							let a = this._parseChar(o[this.name || 'name'])
							if(item.key === a){
								data[index].data.push(o)
							}
						})
					})
				}
				// 组合最后数据并踢出没有匹配到a-z中的任意数据
				let finalData = []
				for (let i in data) {
					if(data[i].data.length > 0){
						finalData.push(data[i])
					}
				}
				this.resource = finalData
				this.cache = finalData
				finalData = null
			},
			_parseChar(name) {
				if (Object.prototype.toString.call(name).slice(8, -1) !== 'String') {
					console.error("name is not string")
					return
				}
				let chars = pinyin.getFullChars(name);
				return chars[0].toUpperCase()
			}
		},
		mounted() {
			this._parseData(this.datas)
		}
	};
</script>

<style lang="scss">
	page {
		background: #f4f4f4;
	}

	.search {
		width: 100%;
		height: 120upx;
		display: flex;
		justify-content: center;
		align-items: center;
		.cancel {
			font-size: 28rpx;
			color: #fff;
			margin-left: 24rpx;
		}
	}

	.s-input {
		width: 610upx;
		height: 66rpx;
		border-radius: 33rpx;
		background: url('') 20upx center no-repeat #fff;
		background-size: 40upx;
		text-indent: 80upx;
	}

	.scroll {
		position: absolute;
		left: 25upx;
		top: 180upx;
		right: 100upx;
		bottom: 25upx;
	}

	.p {
		position: sticky;
		top: 0;
		left: 0;
		background: #f4f4f4;
		font-size: 28upx;
		margin-bottom: 10upx;
		text-indent: 40upx;
		z-index: 999;
		// z-index: 99998;
		font-weight: bold;
		color: #939599;
	}

	.info {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin-bottom: 10upx;
		padding: 20upx 25upx;
		background: #fff;
	}

	.icon {
		width: 100upx;
		height: 100upx;
		border-radius: 50%;
		margin-right: 20upx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 30upx;
		color: #fff;
	}

	.item {
		height: 100upx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}

	.flag {
		width: 50upx;
		position: absolute;
		top: 170upx;
		right: 25upx;
		bottom: 25upx;
	}

	.flag-scroll {
		padding-top: 10upx;
	}

	.flag-key {
		padding: 0;
		margin: 20rpx auto 10upx auto;
		width: 30upx;
		height: 30upx;
		border-radius: 50%;
		color: #939599;
		font-weight: bold;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 21rpx;
		position: relative;
		z-index: 1000;
	}
	.ios {
		top: 160rpx !important;
	}
	.android {
		top: 180rpx;
	}
	.team-content {
		.slot-content {
			.header {
				position: relative;
				// height: 310rpx;
				background-color: #0a2645;
				padding: 30rpx;
				// background: url('../../static/images/user_header_bg.png') no-repeat top right;
				background-size: 15%;
				.top {
					display: flex;
					align-items: center;
					.name {
						color: #fff;
						text:first-child {
							font-size: 40rpx;
						}
						text:last-child {
							font-size: 28rpx;
							padding-left: 20rpx;
						}
					}
					.company {
						color: #fff;
						font-size: 24rpx;
						padding-top: 10rpx;
					}
					image {
						width: 140rpx;
						height: 140rpx;
						border-radius: 50%;
						margin-right: 20rpx;
					}
				}
				.bot {
					display: flex;
					margin-top: 30rpx;
					// justify-content: space-around;
					flex-wrap: wrap;
					.bb {
						background-color: transparent;
						color: #d9b975 !important;
						font-size: 22rpx;
						width: 22%;
						margin-left: 2.3%;
						margin-bottom: 6rpx;
						text-align: center;
					}
				}
				.bg {
					position: absolute;
					right: 0;
					top: 0;
					width: 100rpx;
					height: 133rpx;
					opacity: 0.05;
				}
			}
			.info {
				padding: 50rpx 30rpx;
				text-indent: 2em;
				font-size: 30rpx;
				color: #5b5e67;
			}
		}
	}
</style>
